<template>
	<div class="seachall-box">
		<div class="seachtop">
			<span class="logo"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/logo_1.png" @click="zhuye()"/></span>
			<div class="seachbox"  @click="seachStuta==true&&seachbtn()" :class="{'divboxtran':!seachshow}">
				<div>
					<i class="searchicon"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/icon_search@2x.png" :class="{'imgtrans':!seachshow}"/></i>
					<span class="search-tishi" v-show="seachshow">请输入关键词</span>
					<form action="javascript:;" method="post" v-show="seachinputshow" class="seachfrom">
						<input type="search" id="seach" v-model="seachvalue" @keyup.enter="seachsend" placeholder="请输入关键词"/>
					</form>
				</div>
			</div>
			<span class="qxsousuo" @click="seachremove" v-show="seachrmshow">取消</span>
		</div>
		<ul class="seachall-area ul1">
			<li @click="guige('sales asc')"><span :class="{'active':guigeid=='sales desc'}">销量</span></li>
			<li @click="guige('price asc')"><span :class="{'active':guigeid=='price desc'}">价格</span></li>
			<li @click="guige('add_time asc')"><span :class="{'active':guigeid=='add_time desc'}">新品</span></li>
			<li @click="guige('comments asc')"><span :class="{'active':guigeid=='comments desc'}">好评</span></li>
		</ul>
		<ul class="seachall-area ul2" style="display: none;">
			<li @click="guige('sales desc')"><span :class="{'active':guigeid=='sales desc'}">销量</span></li>
			<li @click="guige('price desc')"><span :class="{'active':guigeid=='price desc'}">价格</span></li>
			<li @click="guige('add_time desc')"><span :class="{'active':guigeid=='add_time desc'}">新品</span></li>
			<li @click="guige('comments desc')"><span :class="{'active':guigeid=='comments desc'}">好评</span></li>
		</ul>
		<ul class="seach-list">
			<li class="dianpu-item" v-for="item in orderlist">
				<router-link :to="{name:'shopXQ',params:{id:item.goods_id}}">
					<img :src="'http://www.ntyouxuan.com/'+item.default_image"/>
					<h4 v-text="item.goods_name">良万家即食罐头蛤蜊肉肉 花蛤花蛤花蛤</h4>
					<span v-text="'￥'+item.price">￥20.00</span>
				</router-link>
			</li>
		</ul>
		<seachrm v-if="seachrmshow" @seachitems="seachsendtow"></seachrm>
	</div>
</template>

<script>
	import seachrm from '@/components/seachview/seachmodel'
	export default{
		data () {
			return{
				orderlist:[],
				guigeid:'sales desc',
				keyword:'虾干',
				cate_id:'',
				cate:'',
				page:1,
				scrollstatu:true,
				pagenum:'',
				seachvalue:'',
				seachStuta:true,
				seachshow:true,
				seachinputshow:false,
				seachrmshow:false
			}
		},
		components:{seachrm},
		created:function(){
			if(this.$route.query.statusall){
				if(this.$route.query.statusall==1){
					this.cate_id=this.$route.query.seachid;
					this.cate=this.$route.query.cate;
				}
			}
			if(localStorage.getItem("nt_keyword")){
				this.keyword=localStorage.getItem("nt_keyword");
			}
		},
		methods:{
			zhuye: function(){
				window.location.href='http://www.ntyouxuan.com/newnt/#/';
			},
			seachsend:function(){
				var ses = $('#seach').val();
				if(ses == ''){
					layer.open({
						content:'请输入关键词',
						skin: 'msg',
						time: 3 //3秒后自动关闭
					});
					return false;
				}
				this.page=1;
				this.guigeid='sales desc';
				this.keyword=this.seachvalue;
				this.cate_id='';
				this.cate='';
				this.orderlist=[];
				this.seachajax();
				this.seachremove();
			},
			seachsendtow:function(data){
		  		this.page=1;
				this.guigeid='sales desc';
				this.keyword=data;
				this.cate_id='';
				this.cate='';
				this.orderlist=[];
				this.seachajax();
				this.seachremove();
		  	},
			seachbtn:function(){
				this.seachshow=false;
				var self=this;
				setTimeout(function () {
					self.seachinputshow=true;
					self.seachrmshow=true;
				},200)
				setTimeout(function () {
                	document.getElementById('seach').focus()
            	}, 300)
			},
			seachremove:function(){
				this.seachshow=true;
				this.seachinputshow=false;
				this.seachrmshow=false;
			},
			guige:function(num){
				this.guigeid=num;
				this.page=1;
				this.orderlist=[];
				this.seachajax();
			},
			seachajax:function(){
				var self=this;
				$.ajax({
					type:"get",
					url:furl+"index.php?app=ajax_search&act=index",
					data:{'keyword':self.keyword,'cate_id':self.cate_id,'page':self.page,'order':self.guigeid,'cate':self.cate},
					dataType:'json',
					success:function(res){
						self.orderlist=self.orderlist.concat(res.retval.goods_list);
						self.pagenum=res.retval.page.page_count;
						self.scrollstatu=true;
						self.orders = res.retval.page.orders;
						if (self.orders == 0) {
							$('.ul1').css('display','none')
							$('.ul2').css('display','block')
						}
						if (self.orders == 1) {
							$('.ul1').css('display','block')
							$('.ul2').css('display','none')
						}
					}
				});
			},
			scrollajax:function(){
				if(this.scrollstatu){
					if(this.page+1<=this.pagenum){
						var dSH=$(document).scrollTop()
						var dH=$(document).height()
						var wH=$(window).height()
						if((dSH+wH)/dH>0.8){
							this.scrollstatu=false;
							this.page=this.page+1;
							console.log(this.page);
							this.seachajax();
						}
					}
					
				}
			}
		},
		mounted:function(){
			this.seachajax();
			var self=this;
			window.addEventListener("scroll",self.scrollajax);
		},
		destroyed:function () {
		    this.scrollstatu = false;
		    if(localStorage.getItem("nt_keyword")){
				localStorage.removeItem("nt_keyword");
			}
		}
	}
</script>

<style>
	.seachall-box{font-size:0;}
	.seachtop{height:0.9rem;position:fixed;top:0;left:0;width:100%;background-color:#fff;box-shadow: 0rem -0.2rem 0.4rem #4B9C31;padding-top: 0.15rem;box-sizing: border-box;z-index: 999;}
	.seachtop>i{display: inline-block;float:left;/*padding:0.1rem 0.32rem;*/}
	.seachtop>i>img{width:1.5rem;float:left;}
	.seachtop .logo{margin-top: -7px;}
	.seachbox{display: inline-block;}
	.seachbox{height:0.6rem;width:5.05rem;box-sizing: border-box;border: 1px solid #fb9722;border-radius:0.3rem;line-height: 0.58rem;}
	.searchicon>img{width:0.26rem;height:0.26rem;float:left;/*margin-left: 1.5rem;*/transform: translateX(1.5rem);margin-right: 0.14rem;margin-top: 0.16rem;}
	.search-tishi{display:inline-block;color:#fb9722;font-size:0.24rem;}
	
	.seachall-area{background-color:#fff;position:fixed;top:0.9rem;left:0;width:100%;z-index: 998;height:0.9rem;box-sizing: border-box;border-bottom: 1px solid #eee;}
	.seachall-area>li{display: inline-block;width:25%;box-sizing: border-box;height:0.9rem;text-align: center;}
	.seachall-area>li>span{display: inline-block;font-size:0.28rem;color:#666;line-height: 0.88rem;border-bottom: 2px solid #fff;box-sizing: border-box;height:0.88rem;}
	.seachall-area>li>.active{color:#fb9722;border-bottom: 2px solid #fb9722;}
	.seach-list{background-color:#fff;padding:1.9rem 0.32rem 0;}
	.qxsousuo{font-size:0.24rem;color:#fb9722;float:right;display: inline-block;line-height: 0.6rem;margin-right: 0.23rem;}
	@-webkit-keyframes seachtran{
		from{transform: translateX(1.5rem);-webkit-transform: translateX(1.5rem);}
		to{transform: translateX(0.2rem);-webkit-transform: translateX(0.2rem);}
	}
	@keyframes seachtran{
		from{transform: translateX(1.5rem);-webkit-transform: translateX(1.5rem);}
		to{transform: translateX(0.2rem);-webkit-transform: translateX(0.2rem);}
	}
	@-webkit-keyframes seachdivtran{
		from{width:5.05rem;}
		to{width:4.4rem;}
	}
	@keyframes seachdivtran{
		from{width:5.05rem;}
		to{width:4.4rem;}
	}
	.imgtrans{
		animation: seachtran 0.2s ease 1 normal;
		animation-fill-mode:forwards;
		-webkit-animation: seachtran 0.2s ease 1 normal;
		-webkit-animation-fill-mode:forwards;
	}
	.divboxtran{
		animation: seachdivtran 0.2s ease 1 normal;
		animation-fill-mode:forwards;
		-webkit-animation: seachdivtran 0.2s ease 1 normal;
		-webkit-animation-fill-mode:forwards;
	}
</style>